<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>登陆</title>
<link rel="stylesheet" type="text/css" href="/static/bootstrap.css">
<script src="/static/jquery.js"></script>
<script src='/static/bootstrap.js'></script> 
</head>
<body style="background: #EEDFCC;">
   <div class="container">
      <div class='row'>
         
         <div class='col-md-4' style="position: fixed;
                  left: 600px;
                  top: 150px;
                  background:    white;
                  padding: 10px;
                  width: 350px;
                 /* display: none;*/
                  border: 2px solid #E0FFFF;
                  border-radius: 15px;">
               <h2 class="text-center">登陆</h2>
            <form action="{:url('index/check')}" method="post">
               <div class='form-group has-feedback'>
                  <label class='bg-success'><big>username</big></label>
                  <input type='text' class='form-control' name='uname'>
                  <!-- <span class='glyphicon glyphicon-remove form-control-feedback text-info' aria-hidden="true" > </span> -->
                  <p class='help-block' style='color:red;display: none;'>用户名不存在</p>
               </div>
               <div class='form-group has-feedback'>
                  <label class='bg-success'><big>password</big></label>
                  <input type='password' class='form-control' name='pwd' required>
                 <!--  <span class='glyphicon glyphicon-ok form-control-feedback text-info' aria-hidden="true" > </span> -->
               </div>
               <div class='form-group'>
                  <label class='bg-success'><big>验证码</big></label>
                  <div style="margin-bottom: 15px;">
                     <img src="{:captcha_src()}"  id ='verify_img' alt="captcha" />
                     <a href="javascript:refreshVerify()">点击刷新</a>
                  </div>
                  <input type="text" class='form-control' placeholder="验证码" name='captcha'>
                  <p class='help-block' style='color:red;display: none;'>验证码不正确</p>
               </div>
               
               <div class='form-group'>
                  <button id='submit' class='btn btn-primary btn-block' style="font-size: 25px;">submit</button>
               </div>
               <div class="text-center">忘记密码？
                  <a href="{:url('user/findPwd')}">找回密码</a>
               </div>      
          </form>
         </div>
      </div>
   </div>
</body>
<script>
//刷新验证码
 function refreshVerify() {
   var ts = Date.parse(new Date())/1000;
   $('#verify_img').attr("src", "/captcha?id="+ts);
}
//验证登陆用户名
$("input[name=uname]").blur(function(){
   val=this.value;
   obj=$(this);
   $.post("{:url('index/checkUser')}",{val:val},function(e){
      if(e==0){
         $("input[name=uname]").next().show();
         obj.data({'num':0});
      }else{
         $("input[name=uname]").next().hide();
         obj.data({'num':1});
      }
   })
})
//验证验证码是否正确
$('input[name=captcha]').blur(function(){
   val=this.value;
   val=val.toUpperCase();
   obj=$(this);
   $.post("{:url('index/checkCaptcha')}",{val:val},function(e){
      if(e==0){
         $("input[name=captcha]").next().show();
         obj.data({'num':0});
      }else{
         $("input[name=captcha]").next().hide();
         obj.data({'num':1});
      }
   })
})

//确认提交
$('#submit').click(function(){
   if(($("input[name=uname]").data('num')!=1)||($("input[name=captcha]").data('num')!=1)){
      $("input").blur();
      return false;
   }
})
</script>
</script>
</html>